<template>
  <a-modal v-model:visible="visible" @cancel="closeModal" :footer="false">
    <template #title> 分享</template>
    <h4 style="margin-top: 0">复制分享链接</h4>
    <a-typography-paragraph copyable>
      {{ link }}
    </a-typography-paragraph>
    <h4>手机扫码查看</h4>
    <img :src="codeImg" alt="" />
  </a-modal>
</template>

<script setup lang="ts">
import QRCode from "qrcode";

import { defineExpose, ref } from "vue";
import message from "@arco-design/web-vue/es/message";

interface Props {
  //分享链接
  link: string;
  title: string;
}

const codeImg = ref();
// 是否可见
const visible = ref(false);
// 要展示的图片
const code = ref();

// 打开弹窗
const openModal = () => {
  visible.value = true;
};
//暴露方法
defineExpose({
  openModal,
});

// 关闭弹窗
const closeModal = () => {
  visible.value = false;
};
const props = withDefaults(defineProps<Props>(), {
  link: "https://www.baidu.com/",
  title: "分享",
});

const value = ref("");

// With promises
QRCode.toDataURL(props.link)
  .then((url: any) => {
    codeImg.value = url;
  })
  .catch((err: any) => {
    message.error("生成二维码失败", err);
  });
</script>

<style scoped></style>
